<script setup lang="ts">
import EditorComponent from '@/components/editor/EditorComponent.vue'
import { ref, reactive, onMounted } from 'vue'
import UploadComponent from '@/components/upload/UploadComponent.vue'
import { editNewsApi } from '@/api/news'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { getNewsListApi } from '@/api/news'
import router from '@/router'
const route = useRoute()

const ruleFormRef = ref()

interface NewsForm {
    [key: string]: any
    title: string
    content: string
    category: number
    cover: string
    file: Object
    isPublish: number
}

const newsForm: NewsForm = reactive({
    title: '',
    content: '',
    category: 1,    // 1最新动态    2典型案例   3通知公告，
    cover: '',
    file: {},
    isPublish: 0    // 0未发布  1已发布
})

const rules = {
    title: [
        { required: true, message: '请输入新闻标题', trigger: 'blur' },
        { min: 3, max: 50, message: '长度范围为 3 到 50 个字符', trigger: 'blur' },
    ],
    category: [
        { required: true, message: '请选择新闻类别', trigger: 'blur' },
    ],
    cover: [
        { required: true, message: '请选择新闻封面', trigger: 'blur' },
    ],
}

const categoryOptions = [
    {
        label: '最新动态',
        value: 1
    },
    {
        label: '典型案例',
        value: 2
    },
    {
        label: '通知公告',
        value: 3
    },
]


const handleCoverChange = (file: File) => {
    newsForm.cover = URL.createObjectURL(file)
    newsForm.file = file
}

const handleEditorChange = (newHtml: string) => {
    newsForm.content = newHtml
}

const onSubmit = () => {
    ruleFormRef.value.validate(async (valid: boolean) => {
        if (valid) {
            const params = new FormData()
            for (const i in newsForm) {
                params.append(i, newsForm[i])
            }
            const result = await editNewsApi(params)
            router.back()

            ElMessage({
                type: 'success',
                message: result.data.msg
            })
        }
    })
}

onMounted(async () => {
    const id = route.params.id as string;
    const result = await getNewsListApi(id)
    Object.assign(newsForm, result.data.data[0])
})
</script>

<template>
    <div>
        <el-icon class="backArrow" @click="router.back();">
            <Back />
        </el-icon>
        <el-form  v-if="newsForm.content" class="editForm" ref="ruleFormRef" :model="newsForm" label-width="auto" label-position="left" size="large"
            :rules="rules">
            <el-form-item label="标题" prop="title">
                <el-input v-model="newsForm.title" />
            </el-form-item>
            <el-form-item label="类别" prop="category">
                <el-select v-model="newsForm.category" placeholder="请选择新闻类别">
                    <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <EditorComponent @editorChange="handleEditorChange" :content="newsForm.content" />
            </el-form-item>
            <el-form-item label="封面" prop="cover">
                <UploadComponent :avatar="newsForm.cover" @fileChange="handleCoverChange" />
            </el-form-item>

            <el-form-item>
                <div class="buttonBar">
                    <el-button class="submitBtn" type="primary" plain @click="onSubmit">更新</el-button>
                </div>
            </el-form-item>
        </el-form>

    </div>
</template>

<style lang='less' scoped>
.backArrow {
    position: absolute;
    top: 7.2%;
    right: 3%;
    font-size: 32px;
    color: #757575;
}
.upload-demo {
    width: 550px;
}

.el-input,
.el-select {
    width: 76%;
}

.el-button {
    margin-left: 5%;
    width: 800px;
}
</style>